30天Flutter手滑系列 - 無狀態與有狀態Widgets (Stateless & Stateful widgets)

11th鐵人賽 flutter

Raymond雷門

2019-09-17 23:44:34

11760 瀏覽

分享至

結束上一篇30天Flutter手滑系列 - 導航與路由(Navigation & Routing)，我們透過範例，示範了在路由跳轉時傳遞參數，但我們都使用的是StatelessWidget去達成目的。如果這時候有個輸入表單，那就需要用StatefulWidget才能做到。
在我們進入進階的狀態管理前，先來認識跟狀態有關的這兩個Widgets吧。

Stateless widget(無狀態 widget)

StatelessWidget在App初始化之後就不能改變，它是immutable。如果想要改變就得new一個新的StatelessWidget去做更換。

常見的StatelessWidget有：

Icon
Text
RaisedButton

延續之前的範例，我們來看一下其結構。
可以看到在整個Widget內都是使用靜態的Widget去做Navigation，過程中也不需要做任何狀態更新，應該是很好理解的。

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home Page')),
      body: Center(
        child: RaisedButton(
          child: Text('Register'),
          onPressed: () {
            Navigator.of(context).pushNamed('/register',
                arguments: {'name': 'Raymond'}).then((value) {
              // 新增第二個變數arguments
              showDialog(
                  // 新增一個對話框，用來顯示回傳的值
                  context: context,
                  child: AlertDialog(
                    content: Text(value),
                  ));
            });
          },
        ),
      ),
    );
  }
}

Stateful widget(有狀態 widget)

StatefulWidget可以在App內無限次的被重繪集及更新狀態，它是mutable，需要重繪時可以調用setState()，去標記自己為dirty狀態，為下次更新做準備。

常見的StatefulWidget有：

Radio
Form
Checkbox

讓我們改寫範例，把傳遞參數部分透過使用者自行輸入名稱的方式去動態改變，因此我們需要改成Stateful Widget去操作這部分。

首先，定義一個StatefulWidget，然後把原本的MyHomePage變成一個私有的State，並繼承自MyHomePage這個StatefulWidget。
然後在_MyHomePageState中加入TextField，而要獲取TextField的值有兩種方法，透過TextEditingController，或是onChanged回傳，在這我用前者。
定義了controller後就可以獲取TextField中的值，因此在原本Navigation的參數部分，就可以直接引用controller的值了。

class MyHomePage extends StatefulWidget {   // 把MyHomePage設為一個StatefulWidget
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {      // 定義一個私有的Class，繼承自ＭyHomePage
  final TextEditingController _controller = TextEditingController();  // 定義一個controler

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home Page')),
      body: Center(
          child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Container(
            width: 200.0,
            margin: EdgeInsets.only(bottom: 10),
            child: TextField(
              controller: _controller,    // 利用controller去獲取TextField的值
            ),
          ),
          RaisedButton(
            child: Text('Register'),
            onPressed: () {
              Navigator.of(context).pushNamed('/register',
                  arguments: {'name': _controller.text}).then((value) {   // 參數接收來自TextField controller的值
                // 新增第二個變數arguments
                showDialog(
                    // 新增一個對話框，用來顯示回傳的值
                    context: context,
                    child: AlertDialog(
                      content: Text(value),
                    ));
              });
            },
          )
        ],
      )),
    );
  }
}

範例展示：

Stateful與Stateless注意事項

盡可能用Stateless。

Stateful Wigets盡量在越低層級的節點使用，避免過多不必要的重build。

setState((){})會觸發State.build，如果你的觸發是在根節點，會造成所有Widgets被重build，會是個效能問題。

需要重build的Widget，盡量節點數越少越好。